<script setup lang="ts" name="playGround">
	import Confirm from '@/components/confirm'
	import { ref } from 'vue'
	const click = () => {
		Confirm({ text: '内容', title: '标题' })
			.then((res) => {
				console.log(res)
			})
			.catch((err) => {
				console.log(err)
			})
	}
	const visible = ref(false)
	const click2 = () => {
		visible.value = true
	}
</script>

<template>
	<div class="content">
		<button @click="click">点我</button>
		<button @click="click2">点我2</button>
		<!-- 把dialog组件传送到body处, 但是.content里面的样式会失效 -->
		<teleport to="body">
			<XtxDialog v-model:visible="visible" title="biaoti">
				<div class="container">123</div>
			</XtxDialog>
		</teleport>
	</div>
</template>

<style lang="less" scoped>
	.content {
		.container {
			// 嵌套写会失效
			color: #09f;
		}
	}
	.container {
		color: #09f;
	}
</style>
